<template>
  <div :class="['msg-tips', msgTipsOpen]">
    <div class="tips-header">
      <span class="tips-title">{{
        $srv.getI18nByValue('新消息') + '(' + 5 + ')'
      }}</span>
      <Icon type="ios-close" class="tips-close-btn" @click="hide" />
    </div>
    <div class="tips-body">
      <div
        class="tips-item"
        v-for="(section, key) of sysMsgTips"
        :key="key"
        v-show="key !== 'count' && section.config.count.unread > 0"
        @click="handleMsgClick(section)"
      >
        <span :class="['tips-item-icon', 'wy-icon', 'wy-list']"></span>
        <span class="tips-item-title">{{
          $srv.getI18nByPath(`menu.${section.config.title}.title`)
        }}</span>
        <Badge class="tips-item-badge" :count="section.config.count.unread" />
      </div>
    </div>
    <div class="tips-footer">
      <span class="tips-clear-btn" @click="clearMsg">{{
        $srv.getI18nByValue('全部已读')
      }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { T_srv, Tsrv, ifs, ts, vue } from './config';

@T_srv.comp
export default class msgTips extends vue {
  @T_srv.prop() id: string;

  @T_srv.model('model-change') isShow: boolean;

  @T_srv.getter('SysMsgTips') sysMsgTips;

  @T_srv.mutation('CLEAR_SYSMSGTIPS') clearSysTips;

  // @T_srv.mutation('DEL_SYSMSGTIPS') delSysTips;

  // 父组件compBoxInfo
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBox: ifs.I_compBox;

  private G_compID: string;

  get msgTipsOpen() {
    return this.isShow ? 'msg-tips-open' : '';
  }

  @T_srv.watch('isShow')
  onIsShowChange(val) {
    if (val) {
      // this.handleMsgData();
    }
  }

  created() {
    this.G_compID = Tsrv.utils.getGUID();
    // 如果外部有传入组件信息
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox = new ts.T_compBox(this.G_compID); // 使用本地实例
    } else {
      this.G_compID = this.compBoxInfo.compID;
      this.GT_compBox = this.compBoxInfo.TcompBox;
    }
    this.GT_compBoxInfo = { compID: this.G_compID, TcompBox: this.GT_compBox };
  }

  mounted() {
    this.GT_compBox.addCompMergeName(this.G_compID, 'msgTips', this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
  }

  private clearMsg() {
    this.$Modal.confirm({
      title: Tsrv.getI18nByPath('prompt.isClearData') as string,
      content: Tsrv.getI18nByPath('prompt.clearData') as string,
      onOk: () => {
        Tsrv.wsCommunicate.clearUnreadMsg();
        this.hide();
      }
    });
  }

  private handleMsgClick(section: any) {
    const type = section?.config?.value;
    if (!Tsrv.noValue(type)) {
      // o-msg-list
      const typeName = Tsrv.wsCommunicate.getMsgType(type);
      const filter = new Map();
      filter.set(Tsrv.globalVar.fieldName.msgType, new Set([type]));
      const cfg = {
        modalSize: [560, 420],
        modalTitle: Tsrv.getI18nByPath(`menu.${typeName}.title`),
        config: { filter }
      };
      Tsrv.utils.createModal('o-msg-list', cfg).then(res => {});
    }
    this.hide();
  }

  public show() {
    this.isShow = true;
  }

  public hide() {
    this.$emit('model-change', false);
  }

  destroyed() {
    // 如果父组件传入的compBoxInfo则删除本文件产生的引用，反之是本组件产生的ID统一删除
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, ['msgTips']);
    }
  }
}
</script>

<style lang="scss" scoped>
.msg-tips {
  width: 300px;
  // height: 300px;
  max-height: 300px;
  position: fixed;
  bottom: -100%;
  right: 6px;
  background-color: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  transition-duration: 1s;
  box-shadow: var(--default-box-shadow-down);
  // z-index: 103;
  z-index: 203;

  // 调整
  display: flex;
  flex-direction: column;

  .tips-header {
    width: 100%;
    height: 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
    padding: 0 10px;
    .tips-title {
      // font-size: 12px;
      font-weight: bold;
    }
    .tips-close-btn {
      font-size: 20px;
      cursor: pointer;
    }
  }

  .tips-body {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    .tips-item {
      width: 100%;
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e7e7e7;
      padding: 0 10px;
      .tips-item-icon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        // background-color: #2d8eff;
        margin-right: 10px;
      }
      .tips-item-title {
        flex: 1;
        font-weight: bold;
      }
      .tips-item-badge {
        transform: scale(0.8);
      }
    }
  }

  .tips-footer {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid #e7e7e7;
    padding: 0 10px;
    .tips-clear-btn {
      margin-right: 10px;
      font-size: 11px;
      color: rgb(24 154 45 / 70%);
      cursor: pointer;
    }
  }

  &.msg-tips-open {
    bottom: 6px;
  }
  .msg-tips-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
    color: #999;
    border-left: 1px solid #e7e7e7;
    &:hover {
      color: #333; // #2d8eff
      background-color: #e3e3e84d;
    }
  }
}
</style>
